/* eslint-disable no-param-reassign */
/* eslint-disable no-unused-vars */
/* eslint-disable react/no-unused-state */
import React, { Component } from 'react';
import { CheckboxChangeEvent } from 'choerodon-ui/lib/checkbox';
import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import { Checkbox, Button, Icon, Layout } from 'choerodon-ui';
import { Select, TextField, Pagination } from 'choerodon-ui/pro';
import { SizeChangerPosition } from 'choerodon-ui/pro/lib/pagination/enum';
import { connect } from 'dva';
import styles from './style.less';
import Carts, { Cart } from './components/MedicinesCart';
import MedicinesIntroduce, { IntroduceProps } from './components/MedicinesIntroduce';
import FullScreen from './assets/full-screen@3x.png';
import { StateType } from './model';

const { Header, Content, Sider, Footer } = Layout;

interface MedicalProps {
  dispatch: any;
  medicalMedicines: StateType;
  loading: boolean;
}

class MedicalMedicines extends Component<MedicalProps> {
  constructor(props: any) {
    super(props);
    this.state = {
      sider: true,
      allPrice: 0,
      allNumber: 0,
    } as any;
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'medicalMedicines/fetchList',
      payload: {
        count: 8,
      },
    });
    dispatch({
      type: 'medicalMedicines/fetchCart',
      payload: {
        count: 8,
      },
    });
  }

  changeLayout() {
    const { sider } = this.state as any;
    this.setState({
      sider: !sider,
    });
  }

  // 根据子组件判断购物车修改
  changeData = (type: string, index: number, value?: any) => {
    const {
      medicalMedicines: { data },
      dispatch,
    } = this.props;
    const copy = data[index];
    switch (type) {
      case 'checkbox':
        data.splice(index, 1, {
          ...copy,
          checked: value.target.checked,
        });
        // 单选改变，合计成本和数量一定改变
        this.setState({
          // data,
          allPrice: data
            .filter((item: Cart) => item.checked)
            .reduce((total: number, current: any) => total + current.totalPrice, 0),
          allNumber: data
            .filter((item: Cart) => item.checked)
            .reduce((total: number, current: Cart) => total + current.number, 0),
        });
        dispatch({
          type: 'medicalMedicines/queryCarts',
          payload: data,
        });
        break;
      case 'number':
        data.splice(index, 1, {
          ...copy,
          number: value,
          totalPrice: value * copy.price,
        });
        // 数量改变得看当前值
        this.setState({
          // data,
          allPrice: data
            .filter((item: Cart) => item.checked)
            .reduce((total: number, current: any) => total + current.totalPrice, 0),
          allNumber: data
            .filter((item: Cart) => item.checked)
            .reduce((total: number, current: any) => total + current.number, 0),
        });
        dispatch({
          type: 'medicalMedicines/queryCarts',
          payload: data,
        });
        break;
      default:
        return '';
    }
  };

  changeList = (type: string, value?: any, index?: number) => {
    // eslint-disable-next-line no-console
    console.log(type, value, index);
  };

  // 全选
  changeAllChoose(e: CheckboxChangeEvent) {
    const {
      medicalMedicines: { data },
      dispatch,
    } = this.props;
    if (e.target.checked) {
      data.forEach((item: Cart) => {
        item.checked = true;
      });
    } else {
      data.forEach((item: Cart) => {
        item.checked = false;
      });
    }

    this.setState({
      // data,
      allPrice: data
        .filter((item: Cart) => item.checked)
        .reduce((total: number, current: any) => total + current.totalPrice, 0),
      allNumber: data
        .filter((item: Cart) => item.checked)
        .reduce((total: number, current: any) => total + current.number, 0),
    });
    dispatch({
      type: 'medicalMedicines/queryCarts',
      payload: data,
    });
  }

  render() {
    const { sider, allPrice, allNumber } = this.state as any;

    const {
      medicalMedicines: { list, data },
    } = this.props;

    // function sizeChangerRenderer({ text }: any) {
    //   return `${text} 条/页`;
    // }

    // function pagerRenderer(page: any, type: any) {
    //   switch (type) {
    //     case 'first':
    //       return <Icon type="fast_rewind" style={{ color: '#666' }} />;
    //     case 'last':
    //       return <Icon type="fast_forward" style={{ color: '#666' }} />;
    //     case 'prev':
    //       return <Icon type="navigate_before" style={{ color: '#666' }} />;
    //     case 'next':
    //       return <Icon type="navigate_next" style={{ color: '#666' }} />;
    //     case 'jump-prev':
    //     case 'jump-next':
    //       return '•••';
    //     default:
    //       return page;
    //   }
    // }

    return (
      <PageHeaderWrapper noHeader>
        <div className={styles.container}>
          {/* <div className={styles.header} /> */}
          <Layout displayName="">
            {sider && (
              <Sider width={280} style={{ background: 'white' }}>
                <div className={styles.scale}>
                  <span>领物车</span>
                  <img src={FullScreen} alt="" onClick={() => this.changeLayout()} />
                </div>
                <div style={{ height: '100vh', paddingBottom: 108, overflow: 'auto' }}>
                  {data.map((value: Cart, index: number) => (
                    <Carts value={value} index={index} onChange={this.changeData} />
                  ))}
                </div>
                <div className={styles['footer-submit']}>
                  <div className={styles['footer-header']}>
                    <span>合计成本:</span>
                    <span className={styles['footer-price']}>{allPrice}</span>
                  </div>
                  <div className={styles['footer-number']}>合计数量: {allNumber}</div>
                  <div className={styles['footer-btn']}>
                    <div className={styles['footer-checkbox']}>
                      <Checkbox onChange={e => this.changeAllChoose(e)}>全选</Checkbox>
                    </div>
                    <div>
                      <Button>删除</Button>
                      <Button type="primary" style={{ marginLeft: 10 }}>
                        提交
                      </Button>
                    </div>
                  </div>
                </div>
              </Sider>
            )}
            <Layout displayName="" style={{ background: '#F8F8F8' }}>
              <Header
                displayName=""
                style={{
                  background: 'white',
                  boxShadow: '0 2px 4px 0 rgba(0,0,0,0.10)',
                  padding: '0px 16px',
                  borderLeft: '1px solid #eee',
                }}
              >
                <div className={styles['right-header']}>
                  {sider ? (
                    <div className={styles['left-title']}>物品展示</div>
                  ) : (
                    <div className={styles['left-icon']}>
                      <span>领物车</span>
                      <img alt="" src={FullScreen} onClick={() => this.changeLayout()} />
                    </div>
                  )}

                  <div className={styles['right-btn']}>
                    <span style={{ marginRight: 16, color: '#F8B303' }}>
                      <Icon type="star-o" style={{ verticalAlign: 'middle', color: '#F8B303' }} />
                      收藏(8)
                    </span>
                    <Select style={{ width: 80, marginRight: 8 }} />
                    <Select style={{ width: 150, marginRight: 8 }} />
                    <TextField
                      style={{ width: 230 }}
                      placeholder="搜索产品名称、编码、产品类别"
                      prefix={<Icon type="search" />}
                    />
                  </div>
                </div>
              </Header>

              <Content displayName="">
                <div className={styles.content}>
                  {list.map((value: IntroduceProps, index: number) => (
                    <MedicinesIntroduce
                      value={value}
                      index={index}
                      sider={sider}
                      onChange={this.changeList}
                    />
                  ))}
                </div>

                <div className={styles.pagination}>
                  <Pagination
                    showSizeChangerLabel={false}
                    showTotal={false}
                    showPager
                    sizeChangerPosition={'right' as SizeChangerPosition}
                    // sizeChangerOptionRenderer={sizeChangerRenderer}
                    // itemRender={pagerRenderer}
                    total={500}
                    pageSize={10}
                    page={1}
                  />
                </div>
              </Content>
              {!sider && (
                <div className={styles.layouts}>
                  <Footer displayName="">
                    <div className={styles['content-footer']}>
                      <div className={styles['content-footer-left']}>
                        <Checkbox onChange={e => this.changeAllChoose(e)}>全选</Checkbox>
                      </div>
                      <div className={styles['content-footer-right']}>
                        <div className={styles['content-footer-desc']}>
                          <div className={styles['content-footer-desc-top']}>
                            <span>合计成本:</span>
                            <span className={styles['content-footer-desc-top-price']}>
                              {allPrice}
                            </span>
                          </div>
                          <div className={styles['content-footer-desc-bottom']}>
                            合计数量: {allNumber}
                          </div>
                        </div>
                        <div>
                          <Button>
                            删除
                          </Button>
                          <Button type="primary" style={{ marginLeft: 10 }}>
                            提交
                          </Button>
                        </div>
                      </div>
                    </div>
                  </Footer>
                </div>
              )}
            </Layout>
          </Layout>
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default connect(
  ({
    medicalMedicines,
    loading,
  }: {
    medicalMedicines: StateType;
    loading: {
      models: { [key: string]: boolean };
    };
  }) =>
    ({
      medicalMedicines,
      loading: loading.models.medicalMedicines,
    } as any)
)(MedicalMedicines);
